<template>
  <div class="w-full flex justify-between gap-2">
    <el-select class="!w-1/3" :disabled="readonly" @change="provinceChange" clearable v-model="provinceSiteId"
       placeholder="请选择省">
      <el-option v-for="item in provinceOptions" :key="item.id" :label="item.regionName"
        :value="item.regionCode"></el-option>
    </el-select>
    <el-select class="!w-1/3" :disabled="readonly" clearable v-model="citySiteId" @change="citiesChange" 
      placeholder="请选择市">
      <el-option v-for="item in cityOptions" :key="item.id" :label="item.regionName"
        :value="item.regionCode"></el-option>
    </el-select>
    <el-select class="!w-1/3" clearable  @change="changeFinished" v-model="areaSiteId" placeholder="请选择区">
      <el-option v-for="item in areaOptions" :key="item.id" :label="item.regionName"
        :value="item.regionCode"></el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getRegionById } from '../../api/system/dict/data'

const emits = defineEmits(['dataChange'])
defineProps(['readonly'])

const provinceSiteId = defineModel('provinceSiteId')
const citySiteId = defineModel('citySiteId')
const areaSiteId = defineModel('areaSiteId')

const provinceOptions = ref([])
const cityOptions = ref([])
const areaOptions = ref([])

onMounted(() => {
  // 初始化省市区数据
  fetchRegions()
})
function fetchRegions() {
  console.log(111);
  getRegionById('0').then((response) => {
    // 假设返回的数据格式为 { data: [{ id: '1', name: '省1' }, ...] }
    provinceOptions.value = response.data || []
  }).catch(error => {
    console.error('Error fetching regions:', error)
  })
}

watch(provinceSiteId, (newVal) => {
  if (newVal) fetchCities(newVal)
})
watch(citySiteId, (newVal) => {
  if (newVal) fetchAreas(newVal)
})

const provinceChange = (id) => {
  areaOptions.value = []
  cityOptions.value = []
  citySiteId.value = ''
  areaSiteId.value = ''
}

const citiesChange = (id) => {
  areaSiteId.value = ''
}

const changeFinished = (v) => {



  emits('dataChange', {
    provinceName: provinceOptions.value.find(f => f.regionCode === provinceSiteId.value)?.regionName,
    cityName: cityOptions.value.find(f => f.regionCode === citySiteId.value)?.regionName,
    areaName: areaOptions.value.find(f => f.regionCode === v)?.regionName
  })
}



function fetchCities(provinceId) {
  if (!provinceId) return
  const id = provinceOptions.value.find(f => f.regionCode === provinceId)?.id
  if (!id) {
    setTimeout(() => {
      fetchCities(provinceId)
    }, 500);
    return
  }
  getRegionById(id).then((response) => {
    cityOptions.value = response.data || []
  }).catch(error => {
    console.error('Error fetching cities:', error)
  })
}

function fetchAreas(cityId) {
  if (!cityId) return
  const id = cityOptions.value.find(f => f.regionCode === cityId)?.id
  if (!id) {
    setTimeout(() => {
      fetchAreas(cityId)
    }, 500);
    return
  }
  getRegionById(id).then((response) => {
    areaOptions.value = response.data || []
  }).catch(error => {
    console.error('Error fetching areas:', error)
  })
}

</script>
